<script>
  if(!Detector.webgl)
    Detector.addGetWebGLMessage();


  var container, stats;
  var camera, cameraTarget, scene, renderer;
  var projector, plane, cube;
  var mouse2D, mouse3D, ray, rollOveredFace, isShiftDown = false, theta = 45, isCtrlDown = false;
  var offsetSize =RoomUtil.OFFSET_SIZE;
  var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
  var cubeGeo, cubeMaterial;
  var i, intersector;
  var lightArray=[];

  var gui, voxelConfig = {
    orthographicProjection : false
  };

  var stageSize = {
    width : window.innerWidth,
    height : window.innerHeight
  };
  var build;
  var clock = new THREE.Clock();
  var gone2Facade;
                          
  init();
  animate();


  var houseStyle=<?php echo json_encode($houseStyle)?>;
  
  if(houseStyle){
  console.warn(<?php echo json_encode($houseStyle)?>);
  console.warn(<?php echo json_encode($facilityRoom)?>);
  
  build.showHouse(<?php echo json_encode($houseStyle)?>,<?php echo json_encode($facilityRoom)?>);
  
  build.houseStyleId=<?php echo json_encode($hsId)?>;
  build.userHouseId=<?php echo json_encode($uhId)?>;
  /*
    this.houseStyleId=parseInt(houseStyle.id);
  $('#nameval').val(houseStyle.houseName);
  $('#addrval').val(houseStyle.address);
  $('#descval').val(houseStyle.description);
  $('#supplyval').val(houseStyle.abbreviation);
  $("#areaval").val(houseStyle.area);
  */
  }
  function init() {
    container = document.createElement('div');
    $(container).addClass('stage');
    $('#content').append(container);
    scene = new THREE.Scene();
    // // camera = new THREE.CombinedCamera(window.innerWidth, window.innerHeight - offsetSize.y, 45, 1, 10000, -2000, 10000);
    // camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 100000);
//    
    // camera.position.y = -600;
    // camera.position.x = 0;
    // camera.position.z = 1000;
    
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000);
    // camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
    camera.position.y = 100;
    camera.position.z = 1300;
    
    
    
    controls = new FirstPersonControls(camera);
    controls.lookSpeed = 0.0125;
    controls.movementSpeed = 500;
    controls.noFly = false;
    controls.lookVertical = true;
    controls.constrainVertical = false;
    controls.freeze=true;
    
    
    //camera.position.y = 800;
    scene.add(camera);
    cameraTarget = new THREE.Vector3(0, 0, 0);
    projector = new THREE.Projector();
    mouse2D = new THREE.Vector3(0, 10000, 0.5);

    // Lights

    var ambientLight = new THREE.AmbientLight(0x101010);
    scene.add(ambientLight);
    lightArray.push(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
    scene.add(directionalLight);
    lightArray.push(directionalLight);


/*
        var ambient = new THREE.AmbientLight( 0x101010 );
        scene.add( ambient );

        var directionalLight = new THREE.DirectionalLight( 0xffffff );
        directionalLight.position.set( 0, -70, 100 ).normalize();
        scene.add( directionalLight );
*/        

  
     light1 = new THREE.PointLight( 0xff0040,2 );
     light1.position.y=10;
     light1.position.z=-100;
     light1.position.x=100;
     scene.add( light1 );
       /*
        lightMesh = new THREE.Mesh( new THREE.SphereGeometry( 100, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
        lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
        lightMesh.position = light1.position;
        scene.add( lightMesh );
        */
        
    //renderer = new THREE.WebGLRenderer({ maxLights: 10, antialias: false, clearColor: 0x030303, clearAlpha: 1 });
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth- offsetSize.x, window.innerHeight - offsetSize.y);
    
    container.appendChild(renderer.domElement);
    

    $(container).css({float:"right"});
    // var url="url('"+"<?php echo Yii::app()->baseUrl.'/images/mouse/normal.png'?>"+"')";
    // alert(url);
    // $('body').css('cursor',url);
    build = new Build(scene, camera);
    
    build.init();

    // stats = new Stats();
    // stats.domElement.style.position = 'absolute';
    // stats.domElement.style.top = '0px';
    // container.appendChild( stats.domElement );

    // document.addEventListener('mousemove', onDocumentMouseMove, false);
    // document.addEventListener('mousedown', onDocumentMouseDown, false);
    // document.addEventListener('mouseup', onDocumentMouseUp, false);
    // document.addEventListener('keydown', onDocumentKeyPress, false);
    
    // document.addEventListener('keydown', onDocumentKeyDown, false);
    // document.addEventListener('keyup', onDocumentKeyUp, false);

    // // add GUI
    // gui = new DAT.GUI();
    // gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
    //
    // if ( voxelConfig.orthographicProjection ) {
    // camera.toOrthographic();
    // camera.position.x = 1000;
    // camera.position.y = 707.106;
    // camera.position.z = 1000;
    // theta = 90;
    // } else {
    // camera.toPerspective();
    // camera.position.y = 800;
    // }
    //
    // });
    // gui.close();

  }
/*
  function onDocumentMouseMove(event) {

    event.preventDefault();

    // mouse2D.x = ( (event.clientX-offsetSize.x) / (window.innerWidth-offsetSize.x) ) * 2 - 1;
    // mouse2D.y = - ( (event.clientY-offsetSize.y) / (window.innerHeight-offsetSize.x) ) * 2 + 1;
    build.moveArea(event);
  }

  function onDocumentMouseDown(event) {

    build.startArea(event);
  }

  function onDocumentMouseUp(event) {

    build.endArea(event);
    


  }
  */
//  debug用
  function onDocumentKeyPress(event){

    switch(event.keyCode){

      case 32:

      // document.removeEventListener('mousemove', onDocumentMouseMove, false);
      // document.addEventListener('mousemove', ctrlWalls, false);
      
      $('canvas').unbind('mousemove');
      $('canvas').bind('mousemove', ctrlWalls);
      
      
      break;
      case 72://H 校验house的合法性
      
      if(gone2Facade){
        break;
      }
      var walls=build.calcWalls();
      scene=new THREE.Scene;
      build.setScene(scene);
      gone2Facade=true;
      scene.add(camera);
      build.facade(walls);
      // document.removeEventListener('mousemove', ctrlWalls, false);
      // document.removeEventListener('mousemove', onDocumentMouseMove, false);
      // document.removeEventListener('mousedown', onDocumentMouseDown, false);
      // document.removeEventListener('mouseup', onDocumentMouseUp, false);
      $('canvas').unbind('mousemove');
      $('canvas').unbind('mousedown');
      $('canvas').unbind('mouseup');
      break;
      
      case 66://B 设定controls，方向控制。
      controls.freeze=false;
        
    }
  }

  function ctrlWalls(event){
    build.ctrlWalls(event);
  }
  function onDocumentKeyDown(event) {

    switch( event.keyCode ) {

      case 16:
        isShiftDown = true;
        break;
      case 17:
        isCtrlDown = true;
        break;

    }

  }

  function onDocumentKeyUp(event) {

    switch( event.keyCode ) {

      case 16:
        isShiftDown = false;
        break;
      case 17:
        isCtrlDown = false;
        break;

    }
  }

  function save() {

    window.open(renderer.domElement.toDataURL('image/png'), 'mywindow');

  }

  //

  function animate() {

    requestAnimationFrame(animate);

    render();

  }

var r=0;
  function render() {
       /*
        lightMesh.position.x = 200 * Math.sin( r );
        lightMesh.position.z = 300 * Math.sin( r );
      */
        r += 0.1;
        
//    scene=build.scene;
    var delta = clock.getDelta();
    controls.around(delta);
    build.update();
    controls.cameraInsector();
    renderer.render(scene, camera);

  }
</script>

<?php include dirname(__FILE__) . '/Panel.php';?>
